<%--
  Created by IntelliJ IDEA.
  User: yrq
  Date: 2019/6/10
  Time: 10:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="Aviato E-Commerce Template">

    <meta name="author" content="">

    <title>Aviato | E-commerce template</title>

    <!-- Mobile Specific Meta-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="../../../images/favicon.png"/>

    <!-- Themefisher Icon font -->
    <link rel="stylesheet" href="../../../plugins/themefisher-font/style.css">
    <!-- bootstrap.min css -->
    <link rel="stylesheet" href="../../../plugins/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="../../../plugins/slick-carousel/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="../../../plugins/slick-carousel/slick/slick-theme.css"/>

    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="../../../css/style.css">
</head>
<body>
<section class="top-header">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-xs-12 col-sm-4">
                <div class="contact-number">
                    <i class="tf-ion-ios-telephone"></i>
                    <span>0129- 12323-123123</span>
                </div>
            </div>
            <div class="col-md-4 col-xs-12 col-sm-4">
                <!-- Site Logo -->
                <div class="logo text-center">
                    <a href="../index.jsp">
                        <!-- replace logo here -->
                        <svg width="135px" height="29px" viewBox="0 0 155 29" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-size="40"
                               font-family="AustinBold, Austin" font-weight="bold">
                                <g id="Group" transform="translate(-108.000000, -297.000000)" fill="#000000">
                                    <text id="AVIATO">
                                        <tspan x="108.94" y="325">AVIATO</tspan>
                                    </text>
                                </g>
                            </g>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="col-md-4 col-xs-12 col-sm-4">
                <!-- Cart -->
                <ul class="top-menu text-right list-inline">
                    <li class="dropdown cart-nav dropdown-slide">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"><i
                                class="tf-ion-android-cart"></i>Cart</a>
                        <div class="dropdown-menu cart-dropdown">
                            <c:forEach items="${carts}" var="cart">
                                <!-- Cart Item -->
                                <div class="media">
                                    <a class="pull-left" href="#">
                                        <img class="media-object" src="${cart.product.img}" alt="image"/>
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading"><a href="">${cart.product.name}</a></h4>
                                        <div class="cart-price">
                                            <span>${cart.c_number} x</span>
                                            <span>${cart.product.price}</span>
                                        </div>
                                        <h5><strong>$${cart.product.price}</strong></h5>
                                    </div>
                                    <a href="#" onclick="deleteCart(${cart.p_id})" class="remove"><i
                                            class="tf-ion-close"></i></a>
                                </div>
                                <!-- / Cart Item -->
                            </c:forEach>
                            <ul class="text-center cart-buttons">
                                <li><a href="/shop/cart.do" class="btn btn-small">View Cart</a></li>
                                <li><a href="" class="btn btn-small btn-solid-border">Checkout</a></li>
                            </ul>
                        </div>

                    </li><!-- / Cart -->

                    <!-- Search -->
                    <li class="dropdown search dropdown-slide">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"><i
                                class="tf-ion-ios-search-strong"></i> Search</a>
                        <ul class="dropdown-menu search-dropdown">
                            <li>
                                <form action="/shop/search.do" method="post">
                                    <input name="name" type="search" class="form-control" placeholder="Search...">
                                </form>
                            </li>
                        </ul>
                    </li><!-- / Search -->

                    <!-- User -->
                    <li class="dropdown dropdown-slide">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"
                           data-delay="350" role="button" aria-haspopup="true" aria-expanded="false">
                            <c:if test="${user==null}">User</c:if>
                            <c:if test="${user!=null}">${user.username}</c:if> <span
                                class="tf-ion-ios-arrow-down"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="/goto/login.do">Login</a></li>
                            <li><a href="/goto/register.do">Register</a></li>
                            <li><a href="/user/logout.do">Logout</a></li>
                        </ul>
                    </li>
                    <!-- / User -->

                </ul><!-- / .nav .navbar-nav .navbar-right -->
            </div>
        </div>
    </div>
</section>

<script type="text/javascript">
    function deleteCart(id) {
        $.ajax({
            type:"POST",
            url:"/cart/delete.do",
            data:{"id":id},
            success:function(){
                window.location.reload();
            }
        })
    }
</script>
</body>
</html>
